在了解Media Queries的用法之前，先來了解一些RWD的觀念吧。

RWD是什麼?

RWD是Responsive Web Design的縮寫，中文是翻譯成響應式網站設計。
由於網路的普及，大家開始使用各種不同裝置來上網瀏覽網頁，RWD的概念也就應運而生。
RWD的概念是為了使網頁在不同螢幕尺寸的裝置下，都能呈現合適比例的畫面。

RWD的環境建立

1. 在HTML的head部分必須設定 viewport

<meta name="viewport" content="width=device-width, initial-scale=1.0">
viewport指的是目前眼睛所見的網頁視窗
content="width=device-width, 是定義網頁寬度等於裝置的寬度，讓網頁能夠因應不同裝置來做出不同的調整
initial-scale=1.0 設定視窗是否需要放大或是縮小，設定1.0的話，就是大小不變

2. 使用CSS media Queries 語法
   Media Queries會偵測裝置的尺寸和方向，並依照不同的裝置給予適當版面設定。

RWD的原則

• 絕對不可以有x軸出現
• 能用flexbox，就不用media query
• 不能用media query，就用flexbox

RWD斷點規劃

PC - 1200px
iPad - 768px
iPad以下 - 767px
iPhone 6 Plus - 414px (視專案族群)
iPhone 6 - 375px (視專案族群)
iPhone 5、SE - 320px

Media Query是什麼?

Media query是由媒體類型(Media type)和媒體特性(Media feature)兩個部分組成的。
Media query媒體查詢會先查詢媒體類型(Media type)是否和使用者使用的裝置符合，若查詢到是符合指定的媒體類型時，就會套用符合該媒體類型的媒體特性內所寫的樣式到使用者所使用的裝置上，讓網頁能在不同螢幕大小時產生不同的版面配置。

CSS Media Query的語法

@media not|only mediatype and (mediafeature and|or|not mediafeature) {
  CSS-Code;
}

參考來源: CSS @media Rule

例如:

@media screen and (min-width: 900px) {
  article {
    padding: 1rem 3rem;
  }
}

Media Type媒體類型有哪些?

1. all : 預設值，適用所有媒體類型裝置
2. print : 適用印刷裝置，包括預覽列印產生的畫面
3. screen : 適用於有螢幕的裝置(例如: 電腦螢幕、平板、手機……)
4. speech : 適用於可以「讀出」頁面的裝置。

Media Feature 媒體特性有哪些?

Media feature有很多個，我目前只有使用過和視窗/頁面尺寸有關的特性，而且偶爾還會把這兩個特性的概念搞混

• max-width 最大寬度，表示這個數字以下（包含） 的都適用。(<=)至多
• min-width 最小寬度，表示這個數字以上（包含） 的都適用。(>=)至少

參考資料:CSS Media Queries 詳細介紹, Day22：小事之 Media Query,
min-width & max-width - 金魚都能懂的CSS必學屬性

以上為個人學習筆記整理
若有錯誤，歡迎指正